<template>
    <div class="s-main">
        <div class="item">
            <span>{{ data7.title }}</span>
            <div class="num">{{ data7.data }}</div>
            <span>次</span>
        </div>
        <div class="item">
            <span>{{ data8.title }}</span>
            <div class="num">{{ data8.data }}</div>
            <span>人</span>
        </div>
        <div class="item">
            <span>{{ data9.title }}</span>
            <div class="num">{{ data9.data }}</div>
            <span>人</span>
        </div>

    </div>
</template>

<script setup>
const props = defineProps({
    data: Object
})

const { data7, data8, data9 } = props.data
</script>
<style lang="scss" scoped>
.s-main {
    display: flex;
    align-items: center;

    // justify-content: space-between;
    .item:nth-child(2) {
        margin: 0 50px;
    }

    .item {
        display: flex;
        align-items: center;

        span {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
        }

        .num {
            margin: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 900;
            font-size: 24px;
            color: #24BAFF;
            font-style: italic;
            width: 100px;
            height: 30px;
            background: rgba(36, 186, 255, 0.2);
            border-radius: 2px;
        }
    }

}
</style>